<template>
  <div class="home">
    <!-- 第一段 -->
    <section class="section">
      <div class="section-title">
        <h1>AI 换换换</h1>
        <div class="title-underline"></div>
      </div>
      <div class="slider-container">
        <div 
          v-for="item in sliderItems" 
          :key="item.id" 
          class="slider-item"
        >
          <div class="comparison-slider">
            <img :src="item.image1" :alt="item.title" class="comparison-image">
            <div class="comparison-separator" 
                 :style="{ left: item.sliderPosition + '%' }"
                 @mousedown.prevent="startDragging(item)"
            >
              <div class="comparison-control"></div>
            </div>
            <div class="comparison-overlay" 
                 :style="{ width: item.sliderPosition + '%' }">
              <img :src="item.image2" :alt="item.title" class="comparison-image">
            </div>
          </div>
          <div class="slider-content">
            <h2>{{ item.title }}</h2>
            <p>{{ item.description }}</p>
          </div>
        </div>
      </div>
    </section>

    <!-- 第二段 -->
    <section class="section">
      <div class="section-title">
        <h1>AI 风格转换</h1>
        <div class="title-underline"></div>
      </div>
      <div class="grid-container">
        <div 
          v-for="image in featuredImages" 
          :key="image.id" 
          class="grid-item"
          @mouseenter="image.isHovered = true"
          @mouseleave="image.isHovered = false"
        >
          <img :src="image.url" :alt="image.title">
          <div class="overlay" :class="{ active: image.isHovered }">
            <h3>{{ image.title }}</h3>
            <p>{{ image.description }}</p>
          </div>
        </div>
      </div>
    </section>

    <!-- 第三段 -->
    <section class="section">
      <div class="section-title">
        <h1>AI 视频</h1>
        <div class="title-underline"></div>
      </div>
      <!-- 第三段内容 -->
    </section>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'

const sliderItems = ref([
  {
    id: 1,
    image1: 'https://images.pexels.com/photos/1732414/pexels-photo-1732414.jpeg',
    image2: 'https://images.pexels.com/photos/374870/pexels-photo-374870.jpeg',
    title: '城市与自然',
    description: '在现代与自然之间寻找平衡',
    sliderPosition: 50,
    isDragging: false
  },
  {
    id: 2,
    image1: 'https://images.pexels.com/photos/3225517/pexels-photo-3225517.jpeg',
    image2: 'https://images.pexels.com/photos/1058958/pexels-photo-1058958.jpeg',
    title: '建筑艺术',
    description: '探索建筑的无限可能',
    sliderPosition: 50,
    isDragging: false
  },
  {
    id: 3,
    image1: 'https://images.pexels.com/photos/1796730/pexels-photo-1796730.jpeg',
    image2: 'https://images.pexels.com/photos/1722183/pexels-photo-1722183.jpeg',
    title: '城市风光',
    description: '感受城市的律动与活力',
    sliderPosition: 50,
    isDragging: false
  }
])

let activeItem = null

const startDragging = (item) => {
  activeItem = item
  activeItem.isDragging = true
  document.addEventListener('mousemove', handleDragging)
  document.addEventListener('mouseup', stopDragging)
}

const handleDragging = (e) => {
  if (!activeItem?.isDragging) return
  
  const slider = e.target.closest('.comparison-slider')
  if (!slider) return

  const rect = slider.getBoundingClientRect()
  const x = Math.max(0, Math.min(e.clientX - rect.left, rect.width))
  activeItem.sliderPosition = (x / rect.width) * 100
}

const stopDragging = () => {
  if (activeItem) {
    activeItem.isDragging = false
    activeItem = null
  }
  document.removeEventListener('mousemove', handleDragging)
  document.removeEventListener('mouseup', stopDragging)
}

onUnmounted(() => {
  document.removeEventListener('mousemove', handleDragging)
  document.removeEventListener('mouseup', stopDragging)
})

const featuredImages = ref([
  {
    id: 1,
    url: 'https://images.pexels.com/photos/374870/pexels-photo-374870.jpeg',
    title: '城市风光',
    description: '现代都市的魅力景观',
    isHovered: false
  },
  {
    id: 2,
    url: 'https://images.pexels.com/photos/3225517/pexels-photo-3225517.jpeg',
    title: '自然风景',
    description: '壮丽的自然景观',
    isHovered: false
  },
  {
    id: 3,
    url: 'https://images.pexels.com/photos/1732414/pexels-photo-1732414.jpeg',
    title: '建筑艺术',
    description: '独特的建筑设计',
    isHovered: false
  },
  {
    id: 4,
    url: 'https://images.pexels.com/photos/1058958/pexels-photo-1058958.jpeg',
    title: '街道场景',
    description: '充满活力的街道',
    isHovered: false
  },
  {
    id: 5,
    url: 'https://images.pexels.com/photos/1796730/pexels-photo-1796730.jpeg',
    title: '现代建筑',
    description: '创新的建筑风格',
    isHovered: false
  },
  {
    id: 6,
    url: 'https://images.pexels.com/photos/1722183/pexels-photo-1722183.jpeg',
    title: '城市夜景',
    description: '迷人的夜间景观',
    isHovered: false
  }
])
</script>

<style scoped>
.home {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.slider-section {
  margin: 40px 0;
}

.slider-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  padding: 20px 0;
}

.slider-item {
  position: relative;
  height: 400px;
  border-radius: 12px;
  overflow: hidden;
}

.comparison-slider {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  cursor: col-resize;
}

.comparison-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.comparison-separator {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: white;
  cursor: col-resize;
  z-index: 2;
}

.comparison-control {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: white;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
}

.comparison-control::before,
.comparison-control::after {
  content: '';
  position: absolute;
  width: 2px;
  height: 16px;
  background: #666;
}

.comparison-control::before {
  left: 12px;
}

.comparison-control::after {
  right: 12px;
}

.comparison-overlay {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  overflow: hidden;
  z-index: 1;
}

.slider-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20px;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.8) 0%,
    rgba(0, 0, 0, 0.4) 60%,
    transparent 100%
  );
  color: white;
  z-index: 3;
}

.slider-content h2 {
  font-size: 1.8rem;
  margin-bottom: 8px;
}

.slider-content p {
  font-size: 1.1rem;
  opacity: 0.9;
}

.featured-section {
  margin: 40px 0;
}

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 300px);
  gap: 20px;
  padding: 20px 0;
}

.grid-item {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  cursor: pointer;
}

.grid-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.grid-item:hover img {
  transform: scale(1.1);
}

.overlay {
  position: absolute;
  bottom: -100%;
  left: 0;
  right: 0;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.8) 0%,
    rgba(0, 0, 0, 0.4) 60%,
    transparent 100%
  );
  color: white;
  padding: 20px;
  transition: bottom 0.3s ease;
}

.overlay.active {
  bottom: 0;
}

.overlay h3 {
  font-size: 1.5rem;
  margin-bottom: 8px;
}

.overlay p {
  font-size: 1rem;
  opacity: 0.9;
}

.third-section {
  min-height: 400px;
  margin: 40px 0;
}

.section {
  margin: 80px 0;  /* 增加段落间距 */
}

.section-title {
  text-align: center;
  margin-bottom: 40px;
  position: relative;
}

.section-title h1 {
  font-size: 2.8rem;
  font-weight: 300;  /* 使用细字体增加优雅感 */
  color: var(--text-color);
  letter-spacing: 4px;  /* 增加字间距 */
  margin: 0;
  padding: 0;
  position: relative;
  display: inline-block;
}

.title-underline {
  width: 60px;
  height: 3px;
  background: var(--primary-color);
  margin: 15px auto 0;
  position: relative;
  transition: width 0.3s ease;
}

.title-underline::before,
.title-underline::after {
  content: '';
  position: absolute;
  width: 8px;
  height: 8px;
  background: var(--primary-color);
  border-radius: 50%;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0;
  transition: all 0.3s ease;
}

.title-underline::before {
  left: -15px;
}

.title-underline::after {
  right: -15px;
}

.section-title:hover .title-underline {
  width: 100px;
}

.section-title:hover .title-underline::before,
.section-title:hover .title-underline::after {
  opacity: 1;
}
</style> 